<template>
  <van-notice-bar
      color="#1989fa"
      background="#ecf9fe"
      left-icon="volume-o"
      style="margin-bottom: 10px"
      :text="indexContent"
  />
  <div style="position: relative; height: 100%; width: 100%">
    <van-swipe :autoplay="3500" lazy-render class="swipe"
               style="width: 90%; height: 190px; margin: 0 auto;
               object-fit:cover">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" style="width: 100%; height: 110%"/>
      </van-swipe-item>
    </van-swipe>
    <van-cell center title="心动模式">
      <template #right-icon>
        <van-switch v-model="isMatchMode" size="25"/>
      </template>
    </van-cell>
    <UserCardList :user-list="userList" :loading="loading"/>
    <van-empty v-if="!userList || userList.length<1" description="数据为空"/>
  </div>
</template>

<script setup lang="ts">
import {ref, watchEffect} from "vue";
import myAxios from "../plugins/myAxios";
import {userType} from "../models/user";
import {showFailToast, showSuccessToast} from "vant";
import UserCardList from "../components/UserCardList.vue";

import img1 from "../assets/images/01.png"
import img2 from "../assets/images/02.png"
import img3 from "../assets/images/03.png"
import {indexContent} from "../assets/noticeText/indexNotice.ts";

const images: string[] = [
  img1, img2, img3
];

// const route = useRoute()
// const {tags} = route.query

const userList = ref<userType[]>([])

const isMatchMode = ref<boolean>(false)
const loading = ref<boolean>(true)

/**
 * 加载数据
 */
const loadData = async () => {
  let userListData: userType[]
  loading.value = true
  // 心动模式
  if (isMatchMode.value) {
    const num = 10;
    userListData = await myAxios.get('/user/match', {
      params: {
        num,
      }
    }).then((response) => {
      console.log('/user/match success', response)
      showSuccessToast('请求成功')
      return response?.data
    }).catch((error) => {
      console.log('/user/match error', error)
      showFailToast('请求失败')
    })
  } else {
    userListData = await myAxios.get('/user/recommend', {
      // withCredentials: false,
      params: {
        pageNum: 1,
        pageSize: 8,
      }
    }).then((response) => {
      console.log('/user/recommend success', response)
      showSuccessToast('请求成功')
      return response?.data?.records
    }).catch((error) => {
      console.log('/user/recommend error', error)
      showFailToast('请求失败')
    })
    if (userListData) {
      userListData.forEach(user => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags as any)
        }
      })
      userList.value = userListData
    }
  }
  loading.value = false
}

watchEffect(() => {
  loadData()
})
// onMounted(async () => {
//   await loadData()
// })
</script>

<style scoped>
.swipe {
  margin: 10px;
  border-radius: 5%;
}

</style>
